<template>
<div class="app">
  <header><span class="ico" v-on:click="handle">&#xe601;</span> <i>{{$route.meta.title}}</i>  <a class="ico">&#xe602;</a></header>
<mt-popup
  v-model="popupVisible"
  position="left"
  popup-transition="popup-fade"
  class="model">
  <p v-if="user.islogin!==false">{{user.username}} <span>{{user.address}}</span> </p>
  <p v-else v-on:click="$router.push('/mine')">登录你的账户 <span v-on:click="handle">-></span></p>
  <div>
  <p>女生</p>
  <p>童装</p>
  <p>创意生活</p>
  <p>逛</p>
  </div>
</mt-popup>
  <div class="app-main">
    <router-view></router-view>
    </div>
  <router-view name="bottom"></router-view>
</div>
</template>

<script>
import Vue from 'vue'
import {mapState} from 'vuex'
import { Popup } from 'mint-ui'
Vue.component(Popup.name, Popup);
export default {
  name: 'App',
  data(){
    return{
      title:''
    }
  },
  methods:{
  handle(){
  return this.popupVisible=!this.popupVisible
  }
  },
  computed:{
    ...mapState(['user'])
  },
 data () {
    return {popupVisible:false}
  }
}
</script>

<style lang="scss">
html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  main, menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, main, menu, nav, section {
    display: block;
  }
  /* HTML5 hidden-attribute fix for newer browsers */
  *[hidden] {
      display: none;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
html,
body,
.app{height: 100%;overflow: hidden;}
.app{display: flex;flex-direction: column;}
header{text-align: center;height: 50px;line-height: 50px;border-bottom: 1px solid black;background:#393939;color: white;font-size: 25px;font-weight: bolder}
header i{padding: 0 100px}
.bottom{text-align: center;height: 50px;line-height: 50px;}
.app-main{flex: 1;overflow-x: hidden;}
@font-face {
  font-family: 'iconfont';  /* project id 931805 */
  src: url('//at.alicdn.com/t/font_931805_9ntvxgcv96i.eot');
  src: url('//at.alicdn.com/t/font_931805_9ntvxgcv96i.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931805_9ntvxgcv96i.woff') format('woff'),
  url('//at.alicdn.com/t/font_931805_9ntvxgcv96i.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931805_9ntvxgcv96i.svg#iconfont') format('svg');
}
.ico{font-family: 'iconfont';color: white}
.model{p{line-height: 30px;padding-left: 30px ;span{float: right;padding-right: 20px}}}
.v-modal{opacity: 0;}
.mint-popup{width: 81%;top: 50%;height: 100%;}
.every{border:1px solid black;margin: 10px 0;width: 200px;;img{width: 200px;}p{text-align: center;font-size: 12px;line-height: 30px}}
.mall{height: 100%;}
</style>
